<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title>京东楼层效果</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			body,
			html {
				height: 100%;
			}
			
			ul {
				list-style: none;
				height: 100%;
			}
			
			ul li {
				height: 100%;
			}
			
			ol {
				list-style: none;
				position: fixed;
				top: 80px;
				left: 50px;
			}
			
			ol li {
				width: 50px;
				height: 50px;
				border: 1px solid #000;
				text-align: center;
				line-height: 50px;
				margin-top: -1px;
				cursor: pointer;
			}
		</style>
	</head>

	<body>
		<ul>
			<li>鞋子区域</li>
			<li>袜子区域</li>
			<li>裤子区域</li>
			<li>裙子区域</li>
			<li>帽子区域</li>
		</ul>
		<ol>
			<li>鞋子</li>
			<li>袜子</li>
			<li>裤子</li>
			<li>裙子</li>
			<li>帽子</li>
		</ol>

		<script src="animate.js"></script>
		<script>
			//需求：点击ol中的li，屏幕滑动到对应的ul中的li的范围。
			//思路：还是利用window.scrollTo();利用缓动动画原理实现屏幕滑动。
			//步骤：
			//0.获取元素
			//1.指定ul和ol中的li的背景色，对应的li背景色相同
			//2.老三步。(获取元素并绑定事件)
			//3.利用缓动动画原理实现屏幕滑动
			//4.用scroll事件模拟盒子距离最顶端的距离。

			//0.获取元素
			var ul = document.getElementsByTagName("ul")[0];
			var ol = document.getElementsByTagName("ol")[0];
			var ulLiArr = ul.children;
			var olLiArr = ol.children;
			var target = 0;
			var leader = 0;
			var timer = null;
			//1.指定ul和ol中的li的背景色，对应的li背景色相同
			//设置一个数组，里面装颜色，然指定的颜色给数组中的指定元素
			var arrColor = ["pink", "blue", "yellow", "orange", "green"];
			//利用for循环给两个数组的元素上色
			for(var i = 0; i < arrColor.length; i++) {
				//上色
				ulLiArr[i].style.backgroundColor = arrColor[i];
				olLiArr[i].style.backgroundColor = arrColor[i];

				//属性绑定索引值
				olLiArr[i].index = i;
				//2.老三步。(并绑定事件)循环绑定，为每一个li绑定点击事件
				olLiArr[i].onclick = function() {
					//***获取目标位置
					//获取索引值。
					target = ulLiArr[this.index].offsetTop;

					//要用定时器，先清除定时器
					clearInterval(timer);
					//3.利用缓动动画原理实现屏幕滑动
					timer = setInterval(function() {
						//(1).获取步长
						var step = (target - leader) / 10;
						//(2).二次处理步长
						step = step > 0 ? Math.ceil(step) : Math.floor(step);
						//(3).屏幕滑动
						leader = leader + step;
						window.scrollTo(0, leader);
						//(4).清除定时器
						if(Math.abs(target - leader) <= Math.abs(step)) {
							window.scrollTo(0, target);
							clearInterval(timer);
						}
					}, 25);
				}
			}

			//4.用scroll事件模拟盒子距离最顶端的距离。
			window.onscroll = function() {
				//每次屏幕滑动，把屏幕卷去的头部赋值给leader,模拟获取显示区域距离顶部的距离
				leader = scroll().top;
			}
		</script>

	</body>

</html>